<!DOCTYPE html>
<html>
<head>
    <title>Meta demo</title>
    <meta charset="utf-8">
</head>
<body>
<div style="height: 800px;" id="canvas"/>
<script src="http://demo.qunee.com/lib/qunee-min.js"></script>
<!--<script src="E:\ExtJS6.5.3\projects\metro-admin\metro-admin-web-v2\src\main\webapp\packages\local\seqdata-qunee\src\qunee\js\seq-qunee-debug.js"></script>-->
<script src="E:\ExtJS6.5.3\projects\metro-admin\metro-admin-web-v2\src\main\webapp\packages\local\seqdata-qunee\src\qunee\SQunee.js"></script>
<script src="E:\ExtJS6.5.3\projects\metro-admin\metro-admin-web-v2\src\main\webapp\packages\local\seqdata-qunee\src\qunee\meta\node\Instance.js"></script>
<script src="E:\ExtJS6.5.3\projects\metro-admin\metro-admin-web-v2\src\main\webapp\packages\local\seqdata-qunee\src\qunee\meta\node\Expander.js"></script>
<script src="E:\ExtJS6.5.3\projects\metro-admin\metro-admin-web-v2\src\main\webapp\packages\local\seqdata-qunee\src\qunee\meta\node\Frame.js"></script>
<script src="E:\ExtJS6.5.3\projects\metro-admin\metro-admin-web-v2\src\main\webapp\packages\local\seqdata-qunee\src\qunee\meta\edge\Relation.js"></script>
<script src="E:\ExtJS6.5.3\projects\metro-admin\metro-admin-web-v2\src\main\webapp\packages\local\seqdata-qunee\src\qunee\container\Container.js"></script>
<script src="E:\ExtJS6.5.3\projects\metro-admin\metro-admin-web-v2\src\main\webapp\packages\local\seqdata-qunee\src\qunee\meta\Meta.js"></script>
<script src="E:\ExtJS6.5.3\projects\metro-admin\metro-admin-web-v2\src\main\webapp\packages\local\seqdata-qunee\src\qunee\meta\demo.js"></script>
<script>
    let graph = new S.Ct.Meta('canvas');
    graph.setData(json);

    let div = document.getElementById('canvas');
    div.addEventListener('onexpanded', function (evt) {
        Q.log(evt.detail.parent.name + ' onexpanded');
    }, true);
    div.addEventListener('oncollapsed', function (evt) {
        Q.log(evt.detail.parent.name + ' oncollapsed');
    }, true);
</script>
</body>
</html>